<!DOCTYPE html>
<html th:replace="~{layout :: layout(~{::title}, ~{::section})}">
<head>
<title>角色管理页面</title>

</head>
<body>
	<section>
		<link
			th:href="@{/zui/lib/DataTables-1.10.21/media/css/jquery.dataTables.min.css}"
			rel="stylesheet">
		<!--<link th:href="@{/zui/lib/bootbox/bootbox.min.css}" rel="stylesheet">-->
		<table class="table datatable" cellspacing="0" width="100%" id="communityList">
			<thead>
				<tr>
					<!-- 以下两列左侧固定 -->
					<th>#</th>
					<th>角色</th>
					
					<th>状态</th>
					<th>介绍</th>
					<!-- 以下列右侧固定 -->
					<th >操作</th>
				</tr>
				 <td colspan="5" align="right">
			    		<a th:href="toedit">添加</a>
			     </td>
			</thead>
			<tbody>
				<tr th:each="role : ${roleList}">
					<td th:text="${role.id}"></td>
					<td th:text="${role.roleName}"></td>
					<td th:text="${role.status==0} ? '未激活' :'激活'"></td>
					<td th:text="${role.description}"></td>
					<td  align="right">
					 <a th:href="@{toedit(id=${role.id})}">更新</a>
					 <a th:href="@{delete(id=${role.id})}">删除</a>
					 <a href="javascript:;" th:onclick="'toAddPermissions(\''+${role.id}+'\')'">添加权限</a>
					</td>
				</tr>

			</tbody>
		</table>
		<div id="myModal" class="modal fade">
			<div class="modal-dialog">
				<div class="modal-content">
					<!-- dialog body -->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
						<h4 class="modal-title">选择权限</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-md-3 col-sm-4 col-xs-6" th:each="permission : ${permissionList}">
								<label class="checkbox-inline">
									<input class="permission" type="checkbox" th:value="${permission.id}" th:text="${permission.code}">
								</label>
							</div>

						</div>

					</div>
					<!-- dialog buttons -->
					<div class="modal-footer"><button type="button" class="btn btn-primary" data-id="0" id="addPremission">添加权限</button></div>
				</div>
			</div>
		</div>
		<script th:src="@{/zui/lib/DataTables-1.10.21/media/js/jquery.dataTables.min.js}"></script>
		<!--<script th:src="@{/zui/lib/bootbox/bootbox.min.js}"></script>-->
		<script type="text/javascript">
	/* 初始化数据表格 */
	 $(document).ready(function(){
        $("#communityList").DataTable({
        	"language": {
                "lengthMenu": "_MENU_ 条记录每页",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "paginate": {
                    "previous": "上一页",
                    "next": "下一页"
                }
            },
        	 paging: true,
			
        });


		$("#addPremission").click(function (){
			//获得角色编号
			let id =$("#addPremission").attr("data-id");
			if(id){
				console.log(id)
				let ids=[];//权限编号数组
				//判断选中的权限
				$("input:checkbox:checked").each(function (){

					ids.push($(this).val());

				})
				if(ids.length==0){
					alert("至少选择一个权限");
				}
				else {

					let idsString=ids.join(',');


					console.log(idsString);
					let params={

					}

					$.post("@{}",params,function (res){


					})
				}


			}
			else{

				alert("系统内部错误，联系管理员")
			}


		});


    });
	function toAddPermissions(id){

		$("#addPremission").attr("data-id",id);
		$('#myModal').modal();
	}
</script>
	</section>
</body>
</html>